<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/register.css" />
<script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/**
	 * 判断邮箱是否正确，并将错误信息输出，控制提交按钮能否使用
	 * @param element 输入标签
	 * @returns {Boolean}
	 */
	function checkError(element){
		var error = check($(element).val());
			$('tr:eq(1) td:eq(1)').text(error);
		if(error != ""){
			$('#registerButton').attr('disabled','true');
			return false;
		}else{
			$('#registerButton').removeAttr('disabled');
			return true;
		}
	}
	$(function (){
		//通过不同提交按钮，更改form表单的action值
		$("#codeButton").click(function (){
			$("#form").attr("action","${pageContext.request.contextPath}/userR/registerEmail.action");
			$("#form").submit();
		});
		//登入校验（非空、密码长度、两次密码是否一致）
		$("#registerButton").click(function (){
			$("#form").attr("action","${pageContext.request.contextPath}/userR/register.action");
			var bol = checkError("input[name=email]");
			if(bol){
				if($("input[name=email]").val() == "" ){
					$('tr:eq(1) td:eq(1)').text("邮箱不能为空!");
					return false;
				}else if($("input[name=code]").val() == ""){
					$('tr:eq(2) td:eq(2)').text("验证码不能为空!");
					return false;
				}else if($("input[name=password]").val() == ""){
					$('tr:eq(3) td:eq(1)').text("密码不能为空!");
					return false;
				}else if($("input[name=secondPwd]").val() == ""){
					$('tr:eq(4) td:eq(1)').text("密码不能为空!");
					return false;
				}else if($("input[name=password]").val().length < 8 
						||$("input[name=password]").val().length > 20){
					$('tr:eq(3) td:eq(1)').text("密码的长度为8~20位");
					return false;
				}else if($("input[name=secondPwd]").val().length < 8 
						||$("input[name=secondPwd]").val().length > 20){
					$('tr:eq(4) td:eq(1)').text("密码的长度为8~20位");
					return false;
				}else if($("input[name=password]").val() != $("input[name=secondPwd]").val()){
					$('tr:eq(4) td:eq(1)').text("两次密码输入的不一致");
					return false;
				}else{
					$("#form").submit();
				}
			}else{
				return false;		
			}
		});
		//判断邮件是否发送成功，如果发送成功，则将发送按钮倒计时，输入框显示注册的邮箱
		if("${ErrorInfo}" == "发送成功！"){
			$("#codeButton").attr("disabled","disabled");
			$("input[name=email]").attr("value","${userBean.email}");
			var second = 30;
			var count = window.setInterval(function (){
				$("#codeButton").text(second + "S");
				second--;
				if(second < 0){
					$("#codeButton").removeAttr("disabled");
					$("#codeButton").text("发送验证码");
					window.clearInterval(count);
				}
			}, 1000);
		}else{
			$("input[name=email]").attr("value","${userBean.email}");
		}
		$("input[name=email]").blur(function() {
			checkError(this);
		}).keyup(function(e) {
			$("span#failLogin").text("");
			var error = check($(this).val());
			$('tr:eq(1) td:eq(1)').text("");
			if(error == ""){
				$('tr:eq(0) td:eq(1)').text(error);
				$('#registerButton').removeAttr('disabled');
			}
			if((e.keyCode < 37) || (e.keyCode >40)){
				//获取要校验的值
				var value1 =  $(this).val();
				//返回的正确的值
				var value2 = checkChar(value1);
				var index = document.getElementById("email").selectionEnd;
				$(this).val(value2);
				//调整文本框中光标的位置
				if(value2.length == value1.length){
					document.getElementById("email").selectionEnd = index
				}else if(value2.length < value1.length){
					document.getElementById("email").selectionEnd = index-1;
				}	
			}
		});
		//消除错误提示
		$('#code').keyup(function(){
			$('tr:eq(2) td:eq(2)').text("");
			$("span#failLogin").text("");
		});
		$('#password').keyup(function(){
			$('tr:eq(3) td:eq(1)').text("");
			$("span#failLogin").text("");
		});
		$('#secondPwd').keyup(function(){
			$('tr:eq(4) td:eq(1)').text("");
			$("span#failLogin").text("");
		});
	});
</script>
</head>
<body>
	<div id="registerDiv">
		<form id="form" action="" method="post">
		<table border="0" cellspacing="0"  cellpadding="0">
			<tr><td colspan="3" height="10px"><span id="failLogin">${ErrorInfo}</span></td></tr>
			<tr>
				<td colspan="2"><input type="text" name="email" id="email"  placeholder="邮箱账号"maxlength="32" autofocus="autofocus" /></td>
				<td class="errorInfo"></td>
			</tr> 
			<tr>
				<td><input type="text" name="code" id="code" placeholder="验证码" /></td>
				<td><button id="codeButton" type="submit">发送验证码</button></td>
				<td class="errorInfo"></td>
			</tr>
			<tr>
				<td colspan="2"><input type="password" name="password" id="password" placeholder="请输入密码" maxlength="20" /></td>
				<td class="errorInfo"></td>
			</tr>	
			<tr>
				<td colspan="2"><input type="password" name="secondPwd" id="secondPwd" placeholder="请重复输入密码" maxlength="20" /></td>
				<td class="errorInfo"></td>
			</tr>
			<tr>
				<td colspan="2"><button id="registerButton" >注册</button></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2"><a href="${pageContext.request.contextPath}/userR/login.action">登录</a></td>
				<td></td>
			</tr>
				
		</table>
		</form>
	</div>
</body>
</html>